<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../assets/lib/layui/css/layui.css" />
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 15px;
            background-color: #f2f3f5;
        }

        .layui-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #form-add,
        #form-edit {
            padding-top: 20px;
            padding-right: 30px;
        }

        .layui-badge {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">
        <div class="layui-card-header">
            <span>轮播图管理</span>
            <button id="uploadSwiper" type="button" class="layui-btn layui-btn-normal">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <input type="file" id="myfile" multiple style="display: none;">
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col width="5%">
                    <col width="20%">
                    <col width="30%">
                    <col width="10%">
                    <col width="10%">
                </colgroup>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>图片预览</th>
                        <th>图片路径</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>


                </tbody>
            </table>
        </div>
    </div>

    <div class="layui-footer" style="text-align: center">
        <!-- 底部固定区域 -->
        轮播图列表
    </div>

    <!-- 轮播图列表模块 -->
    <script type='text/html' id='swiper-list'>
        {{each data}}
        <tr>
            <td>{{$value.id}}</td>
            <td><img src="{{'http://localhost:8888/uploads/' + $value.swiperimg}}" alt=""></td>
            <td>{{$value.swiperimg}}</td>
            <td>{{if $value.swiperstatus === 1}}
                <span data-id='{{$value.id}}' data-status='2' class="layui-badge layui-bg-green">√</span>
                {{else}}
                <span data-id='{{$value.id}}' data-status='1' class="layui-badge layui-bg-cyan">×</span>
                {{/if}}
            </td>
            <td>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete"
                    data-id='{{$value.id}}'>删除</button>
            </td>
        </tr>
        {{/each}}
    </script>

    <!-- 引入模板引擎文件 -->
    <script src="../assets/lib/template-web.js"></script>
    <script src="../assets/lib/layui/layui.all.js"></script>
    <!-- 引入jQuery文件 -->
    <script src="../assets/lib/jquery.js"></script>
    <!-- 引入baseAPI.js文件 -->
    <script src="../swiper/js/baseAPI.js"></script>
    <!-- 引入art_cate.js文件 -->
    <script src="../swiper/js/swiper_cate.js"></script>
</body>

</html>